<template>
  <table class="sd-table">
    <thead>
      <tr>
        <td width="80px;">项目名称</td>
        <td width="80px;">汇总</td>
        <td v-for="label in labels" v-bind:key="label" width="60px;">{{ label }}</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(legend, index) in legends" v-bind:key="legend">
        <td width="80px;">
          <div class="sku">{{ legend }}</div>
        </td>
        <td width="80px;">
          {{ summary[index] }}
        </td>
        <td width="60px;" v-for="item in series[index].data" v-bind:key="item">
          {{ item }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup name="DemoTable" lang="ts">
const goTarget = (url: string) => {
  window.open(url, '__blank');
};

const labels = ref(['新增', '删除', '修改']);

const legends = ref(['新增', '删除', '修改']);

const summary = ref([120, 90, 0]);

const series = ref([
  {
    name: '新增',
    type: 'bar',
    data: [120, 90, 0]
  },
  {
    name: '删除',
    type: 'bar',
    data: [90, 120, 0]
  },
  {
    name: '修改',
    type: 'bar',
    data: [0, 0, 120]
  }
]);
</script>

<style lang="scss" src="@/assets/css/packbox_table.scss" scoped>
/* @import url('@/assets/css/packbox_table.scss'); */
.sd-table td .sku {
  color: var(--el-color-blue);
}
</style>
